<template>
  <div>
    <div class="tags-panel">
      <div class="tags-panelList clear">
        <div class="tags-panelSpan">类型：</div>
        <ul class="tags">
          <li
            class="list"
            v-for="(item, index) in typeList"
            :class="{ active: index == isActive }"
            @click="changeValue(index, item, item.name)"
            :key="item.id"
          >
            {{ item.name }}
          </li>
        </ul>
      </div>
      <div class="tags-panelList clear">
        <div class="tags-panelSpan">区域：</div>
        <ul class="tags">
          <li
            v-for="(item, index) in regionList"
            :key="item.id"
            :class="{ active: index == isRegion }"
            @click="Region(index, item, item.name)"
          >
            {{ item.name }}
          </li>
        </ul>
      </div>
      <div class="tags-panelList clear">
        <div class="tags-panelSpan">年代：</div>
        <ul class="tags">
          <li
            v-for="(item, index) in yearsList"
            :key="item.id"
            :class="{ active: index == isYears }"
            @click="years(index, item, item.name)"
          >
            {{ item.name }}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.tags-panel {
  width: 1080px;

  border: 1px solid #e5e5e5;
  padding: 0 20px;
  margin: 0 auto;
  margin-top: 40px;

  .tags-panelSpan {
    height: 24px;
    line-height: 24px;
    float: left;
    color: #999;
    font-size: 14px;
  }
  .tags-panelList {
    padding: 10px 0;
    border-bottom: 1px dotted #e5e5e5;
    .tags {
      float: left;
      width: 1000px;
      li {
        color: #333;
        font-size: 14px;
        padding: 3px 9px;
        display: inline-block;
        margin-left: 12px;
      }
      li:hover {
        color: #ef4238;
      }
      .active {
        background: #f34d41 !important;
        color: #fff !important;
        border-radius: 14px !important;
      }
    }
  }
  div:nth-child(3) {
    border: 0;
  }
}
</style>
<script>
import bus from "../../bus/index";
export default {
  data() {
    return {
      isActive: false,
      isRegion: false,
      isYears: false,
      list: [1, 2, 3, 4, 5, 6],
      typeList: [
        { id: 0, name: "全部" },
        { id: 1, name: "喜剧" },
        { id: 2, name: "恐怖" },
        { id: 3, name: "爱情" },
        { id: 4, name: "文艺" },
        { id: 5, name: "犯罪" },
        { id: 6, name: "科幻" },
        { id: 7, name: "冒险" },
        { id: 8, name: "战争" },
        { id: 9, name: "奇幻" },
        { id: 10, name: "传记" },
        { id: 11, name: "历史" },
        { id: 12, name: "其他" },
      ],
      regionList: [
        { id: 0, name: "全部" },
        { id: 1, name: "大陆" },
        { id: 2, name: "中国香港" },
        { id: 3, name: "中国台湾" },
        { id: 4, name: "美国" },
        { id: 5, name: "韩国" },
        { id: 6, name: "日本" },
        { id: 7, name: "法国" },
        { id: 8, name: "英国" },
        { id: 9, name: "印度" },
        { id: 10, name: "其他" },
      ],
      yearsList: [
        { id: 1, name: "全部" },
        { id: 2, name: "2020" },
        { id: 3, name: "2019" },
        { id: 4, name: "2018" },
        { id: 5, name: "2017" },
        { id: 6, name: "2016" },
        { id: 7, name: "2015" },
        { id: 8, name: "2014" },
        { id: 9, name: "2013" },
        { id: 10, name: "2012" },
        { id: 11, name: "2011" },
        { id: 12, name: "2000-2010" },
        { id: 13, name: "90年代" },
        { id: 14, name: "80年代" },
        { id: 15, name: "70年代" },
        { id: 16, name: "更早" },
      ],
    };
  },
  methods: {
    changeValue(index, item, type) {
      this.isActive = index;
      bus.$emit("gettype", index);
      //   alert(type);
    },
    Region(index, item, region) {
      this.isRegion = index;
      //   console.log(item);
      bus.$emit("gettype", index);
      //   alert(region);
    },
    years(index, item, age) {
      this.isYears = index;
      //   console.log(item);
      //   alert(age);
    },
  },
};
</script>
